import React, { memo, useState } from 'react';

const slow = () => {
	const [count, setCount] = useState(0);

	return (
		<div>
			<span>{count}</span>
			<button className='w-30 p-2 bg-red-400 text-white' onClick={() => setCount(count + 1)}>increase</button>
			<Slow2 name='li' age={count} />
		</div>
	);
};

const Slow2 = memo(Slow, (prev, next) => prev.age === next.age);

function Slow({ age = 9, name = 'wang' }: { age?: number; name: string; }) {
	const now = performance.now();
	while ((performance.now() - now) < 1000) { }

	console.log('slow rended');
	return <div>{age}

		<div>{name}</div>
	</div>;
}


export default slow;